<template>
  <el-dialog
      :style="`
        --czr-dialog_height: ${height};
        --czr-dialog_max-height: ${maxHeight};
        --czr-dialog_min-height: ${minHeight};
      `"
      :modal-class="`
        ${state.uuid}
        __czr-dialog ${maxHeight === 'unset' ? '' : '__czr-dialog-auto-height'} ${hiddenStyle ? '__czr-dialog-hidden-style' : ''}
      `"
      v-bind="$attrs"
      v-model="state.showDialog"
      :title="title"
      :width="width"
      align-center
      :before-close="beforeClose"
      :show-close="false"
      :append-to-body="isValue($attrs.appendToBody) ? $attrs.appendToBody : true"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
  >
    <template #header>
      <div class="_czr-dialog-head" v-if="title">
        <div class="__cdh-title">{{title}}</div>
        <div class="__cdh-slot">
          <slot name="head"/>
        </div>
        <div class="__cdh-close __hover" @click="CDClose()">
          <SvgIcon name="czr_close" size="16" color="#303133"/>
        </div>
      </div>
    </template>
    <div class="__czr-dialog-main" :class="{isFull: full !== false}" v-loading="loading">
      <div class="__czr-dialog-content">
        <slot/>
      </div>
      <div class="__czr-dialog-foot" :style="`justify-content: ${footAlign};padding: ${footPadding};`" v-if="showSubmit || showClose || $slots.foot">
        <slot name="foot" :close="CDClose" :submit="CDSubmit"/>
        <template v-if="footAlign === 'center'">
          <div v-if="showSubmit" class="__czr-dialog-foot_submit __hover" @click="CDSubmit">{{submitText}}</div>
          <div v-if="showClose" class="__czr-dialog-foot_cancel __hover" @click="CDClose()">{{closeText}}</div>
        </template>
        <template v-else>
          <div v-if="showClose" class="__czr-dialog-foot_cancel __hover" @click="CDClose()">{{closeText}}</div>
          <div v-if="showSubmit" class="__czr-dialog-foot_submit __hover" @click="CDSubmit">{{submitText}}</div>
        </template>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CzrDialog',
});
import {isValue} from "@/utils/czr-util";
import {
  computed,
  onMounted,
  reactive,
  watch,
} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import { v4 } from "uuid";
import {useDialogLevelStore} from "@/stores";

const emit = defineEmits(['onSubmit', 'update:show', 'onClose'])
const props = defineProps({
  show: {required: true, type: Boolean},
  title: {default: ''},
  width: {default: '50%'},
  full: {default: false},
  submitText: {default: '确定'},
  closeText: {default: '取消'},
  showClose: {default: true},
  showSubmit: {default: true},
  footAlign: {default: 'center'},
  footPadding: {default: '16px 26px'},
  height: {default: 'auto'},
  maxHeight: {default: 'unset'},
  minHeight: {default: 'unset'},
  closeOnClickModal: {default: false},
  closeOnPressEscape: {default: false},
  closeConfirm: {default: false},
  closeConfirmText: {default: {
    title: null,
    message: null,
    submit: null,
    close: null,
  }},
  loading: {
    default: false,
    type: Boolean
  },
  hiddenStyle: {
    default: false
  }
})
const DialogLevelStore = useDialogLevelStore()
const state = reactive({
  showDialog: false,
  closeConfirmTextTemp: {
    title: '提示',
    message: '请确认是否关闭？',
    submit: '确定',
    close: '取消',
  },
  uuid: v4()
})
watch(() => props.show, (n) => {
  state.showDialog = n
  if (n) {
    DialogLevelStore.add(state.uuid)
  } else {
    DialogLevelStore.del(state.uuid)
  }
})
const beforeClose = (done) => {
  CDClose(done)
}
const closeConfirmTextCpt: any = computed(() => {
  return {
    title: isValue(props.closeConfirmText.title) ? props.closeConfirmText.title : state.closeConfirmTextTemp.title,
    message: isValue(props.closeConfirmText.message) ? props.closeConfirmText.message : state.closeConfirmTextTemp.message,
    submit: isValue(props.closeConfirmText.submit) ? props.closeConfirmText.submit : state.closeConfirmTextTemp.submit,
    close: isValue(props.closeConfirmText.close) ? props.closeConfirmText.close : state.closeConfirmTextTemp.close,
  }
})
const CDClose = async (done = () => {}) => {
  if (props.closeConfirm !== false) {
    await ElMessageBox.confirm(closeConfirmTextCpt.value.message, closeConfirmTextCpt.value.title, {
      confirmButtonText: closeConfirmTextCpt.value.submit,
      cancelButtonText: closeConfirmTextCpt.value.close,
      type: "warning",
    }).then(() => {
      emit('update:show', false)
      emit('onClose')
      done()
    }).catch(() => {})
  } else {
    emit('update:show', false)
    emit('onClose')
    done()
  }
}
const CDSubmit = () => {
  emit('onSubmit')
}
onMounted(() => {
  state.showDialog = props.show
})
</script>

<style scoped lang="scss">

</style>
